/*
 * @Author: xujianwei
 * @Date: 2021-04-29 15:59:14
 * @LastEditors: xujianwei
 * @LastEditTime: 2021-05-07 17:41:46
 */

// 晴 少云 晴间多云多云 阴 有风 平静 微风 和风 清风 强风/劲风 疾风 大风 烈风 
// 风暴 狂爆风 飓风 热带风暴 霾 中度霾 重度霾 严重霾 
// 阵雨 雷阵雨 雷阵雨并伴有冰雹 小雨 中雨 大雨 暴雨 大暴雨 特大暴雨 强阵雨 强雷阵雨 极端降雨 
// 毛毛雨/细雨 雨 小雨-中雨 中雨-大雨 大雨-暴雨 暴雨-大暴雨 大暴雨-特大暴雨 
// 雨雪天气 雨夹雪 阵雨夹雪 冻雨 雪 阵雪 小雪 中雪 大雪 暴雪 小雪-中雪 中雪-大雪 大雪-暴雪 
// 浮尘 扬沙 沙尘暴 强沙尘暴 龙卷风 雾 浓雾 强浓雾 轻雾 大雾 特强浓雾  热 冷 未知

import { defineComponent,onMounted, reactive,ref } from 'vue'
import  {ipToCity,weather as Weather,lunar as Lunar} from '@/api/util'
import './style.scss'
 export default defineComponent({
    setup(){
         let info = reactive({
            city:'',
            weather:"",
            temperature:'--',
            winddirection:"",
            windpower:"",
            lunar:{
                cYear: "",
                firstWeek: 1,
                length: '',
                sDay: '',
                sMonth: '',
                sYear: '',
                zodiac: '',
            }
         })
        onMounted(async ()=>{
            let {data} = await ipToCity()
            info.city = data.city
            let res = await Weather()
            info.weather = res?.data?.lives[0]?.weather || '--'
            info.temperature = res?.data?.lives[0]?.temperature || '--'
            info.winddirection = res?.data?.lives[0]?.winddirection || '--'
            info.windpower = res?.data?.lives[0]?.windpower || '--'
            
            let ress = await Lunar()
            info.lunar = ress.data
        })
        const getWeek = (lunar)=>{
            let arr = []
            for(let i = 0; i < lunar.length; i++){
                arr.push(lunar[i])
            }
            return arr.map(item=>{
                return <div class={['card',item.isToday ? 'active' : '']}>
                <p class='lDay'>{item.cYear}年 {item.isLeap ? '闰': '' }{item.lMonth}月 {item.lDay}日</p>
                <p class='sDay'>{item.sDay === 1 ? item.sMonth+ '月' : item.sDay}</p>
                <p class='days'>{item.lunarFestival} {item.solarTerms} {item.solarFestival}</p>
                </div>
                //  lunarFestival //农历节日
                //  solarFestival //公历节日
                //  solarTerms    //节气
            })
        }
        const  getEmpty = (firstWeek:number)=>{
            console.log(firstWeek)
            let arr = Array(firstWeek -1 ).fill(1)
            return arr.map(()=>{
                return  <div class='card' ></div>
            })
        }
         return () =>{
             return <div class='calendar'>
                <div class='title'>{info.city} {info.weather} {info.temperature}° {info.winddirection}风{info.windpower}级</div>
                <div class='title'>公历{info.lunar.sYear}年{info.lunar.sMonth + 1}月 农历{info.lunar.cYear}（{info.lunar.zodiac}）年</div>
                <div class='teleport'></div>
                <div class='flex'>
                {getEmpty(info.lunar.firstWeek)}
                 {getWeek(info.lunar)}
                </div>
             </div>
         }
     }
 })